<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			height: 100%;
			overflow: hidden;
			background: url(images/bg.gif);
		}
		.container{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
 
		}
		.container .page{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.container .page0{
			top: 0;
			left: 0;
			background-color: pink;
		}
		.container .page1{
			top: 10%;
			left: 110%;
			background-color: blue;
		}
		.container .page2{
			top: 120%;
			left: 10%;
			background-color: green;
		}
		.container .page3{
			top: 130%;
			left: 130%;
			background-color: orange;
		}
	</style>
	<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".page0 input").click(function(){
				$(".container").animate({"top":"-10%","left":"-110%"},1000)
			})

			$(".page1 input").click(function(){
				$(".container").animate({"top":"-120%","left":"-10%"},1000)
			})

			$(".page2 input").click(function(){
				$(".container").animate({"top":"-130%","left":"-130%"},1000)
			})

			$(".page3 input").click(function(){
				$(".container").animate({"top":"0%","left":"0%"},1000)
			})
		});
	</script>
</head>
<body>
	<div class="container">
		<div class="page page0"><input type="button" value="点我去下一个页面"/></div>
		<div class="page page1"><input type="button" value="点我去下一个页面"/></div>
		<div class="page page2"><input type="button" value="点我去下一个页面"/></div>
		<div class="page page3"><input type="button" value="点我去第1个页面"/></div>
	</div>
</body>
</html>